import React, {Component} from 'react';
import {Switch, Route, Link, Redirect} from "react-router-dom"

import Detail from "./Detail";

class Message extends Component {
  state = {
    messageList: [
      {
        id: "1",
        title: "消息1",
        content:"消息队里偶尔"
      },
      {
        id: "2",
        title: "消息2",
        content:"水电费"
      },
      {
        id: "3",
        title: "消息3",
        content:"山东分公司的"
      }
    ]
  }

  render() {
    const {messageList} = this.state;
    return (
      <div>
        <ul>
          {
            messageList.map(item => {
              return (
                <li key={item.id}>
                  {/* 向组件发送search参数 */}
                  <Link to={ `/home/message/detail/?id=${item.id}&title=${item.title}&content=${item.content}` }>{item.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/* 注册路由  */}
        {/* search参数不需要申明接受参数 */}
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    );
  }
}

export default Message;